<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    #app-3{
        width: 260px;
        height: 100px;
        background-color: pink;
        text-align: center; 
        
    }
</style>

<body>

    <div id="app-2">
        <span v-bind:title="message" > 
            鼠标摸过来
        </span>
    </div>

    <div id="app-3">{{ nowDate }}</div>

    <hr>

    <!-- 实现表单输入和应用状态之间的双向绑定 -->
    <div id="app-4" >
        <form action="form_action.asp" method="get">
            <p>username: <input type="text" name="fname" v-model="msg" /></p>
            <p>password: <input type="password" name="lname"  v-model ="msg1"/></p>
            <input  type="button" value="🖊" v-on:click="print" />
            <input type="button" value="🖊" @click="reverse" />
          </form>


    </div>


    <div id="app-5">

        <ol>
            <todo-item></todo-item>
        </ol>


    </div>




    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    <script>

        
     Vue.component('todo-item', {
     template: '<li>这是个待办项</li>'
       
    })

    var app5 = new Vue({
        el :"#app-5",

    })


        var app2 = new Vue({
            el: '#app-2',
            data: {
                 message: '不要不要啊 受不了了',
                seen :false
            }
        })

        var app4 = new Vue({    
            el: "#app-4",
            data:{
                msg :"luhan",
                msg1 :"123"
            },
            methods:{
                print:function(){
                    this.msg = "青柠"
                },
                reverse:function(){
                   this.msg = this.msg.split("").reverse().join("")
                }
            }
        })




        var app3 = new Vue({
            el: '#app-3',
            data: {
                nowDate: ""
            },
            methods: 
            {   
                //隔一定周期调用函数
                currentTime() {
                    setInterval(this.formatDate, 1000);
                },

                formatDate() {
                    let date = new Date();
                    let year = date.getFullYear(); // 年
                    let month = date.getMonth() + 1; // 月
                    let day = date.getDate(); // 日
                    let week = date.getDay(); // 星期
                    let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                    let hour = date.getHours(); // 时
                    hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
                    let minute = date.getMinutes(); // 分
                    minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
                    let second = date.getSeconds(); // 秒
                    second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
                    this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
                }
            },
         // mounted通常是在模板渲染成html后调用，通常在初始化界面完成后 再对html里的节点进行一些需要的操作

            mounted() {
                this.currentTime();
            },

        })



    </script>



</body>

</html>